<template>
  <s-layout title="超级星期天">
    <view class="lottery-container">
      <div class="lottery_box">
        <image
          class="bgi"
          src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250326/a386688b13c80098be15f19b3800a9dd.png"
          mode="widthFix"
        ></image>
        <!-- 顶部奖金展示 -->
        <view
          class="my"
          @click="sheep.$router.go('/pages/tuangou/lottery_result_day')"
        >
          我的中奖记录
        </view>
        <view class="topriqi">{{ weeks[selectedIndex].sub_title }}</view>
        <view class="btnwq">
          <picker
            @change="onPickerChange"
            :value="selectedIndex"
            :range="weeks"
            class="pickercls"
            range-key="sub_title"
          >
            往期奖池
          </picker>
        </view>
        <view class="topprice">￥</view>
        <view class="toppricenum">{{ weeks[selectedIndex].price }}</view>
        <!-- 转盘抢红包区域 -->
        <view class="lottery-grid">
          <view style="display: flex;align-items: center;justify-content: center;padding-top: 100rpx;">
            <view class="zhuanpan">
              <view
                class="point"
                v-for="item in 9"
                :key="item"
              ></view>
              <view
                class="content"
                :style="{'background-image':groupbg,transform:'rotateZ('+rotate+'deg)',transition: 'transform '+second+'s'}"
              >
                <template
                  v-for="(item,index) in display_prizes"
                  :key="index"
                >
                  <view
                    class="item"
                    :style="{transform: 'rotateZ('+index*(360/8)+'deg)'}"
                  >

                    <!-- <view class="img">
									<image :src="item.image" mode="aspectFit"></image>
								</view> -->
                    <view class="name">{{item.name}}</view>
                  </view>
                </template>
              </view>
              <view class="arrow"></view>
            </view>
          </view>
        </view>
      </div>
      <!-- 抢红包按钮 -->
      <view class="cjbtn">
        <template v-if="dateflag">
          <template v-if="payflag">
            <template v-if="!prizeflag">
              <view
                class="cjtext"
                @click="start"
              >
                点击立即抢红包
              </view>
            </template>
            <template v-else>
              <view class="cjtext">
                感谢您的参与
              </view>
            </template>
          </template>
          <template v-else>
            <view class="cjtext">
              未有抢红包资格
            </view>
          </template>
        </template>
        <template v-else>
          <view class="cjsettime">
            <view style="margin-top: 15rpx;">抢红包时间每周日19到21点</view>
            <view
              style="margin-top: 5rpx;"
              class="settime"
            >
              <image
                class="bell"
                src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250326/21de12bf28340254bcfa1cae215d7a74.png"
              ></image>
              <view style="color: #FA5151;">{{ days }}天{{ hours }}时{{ minutes }}分{{ seconds }}秒</view>
            </view>
          </view>
        </template>

      </view>
      <!-- 中奖名单 -->
      <view class="textzj">
        {{ dateflag ? '本期中奖名单' : '上期中奖名单' }}
      </view>
      <view
        class="textwq"
        @click="sheep.$router.go('/pages/tuangou/lottery_list_week')"
      >
        往期名单
        <view class="jt" />
      </view>
      <view class="mingdan">
		  <template v-if="desensitizedMobile.length">
			  <swiper
			    :autoplay="true"
			    :interval="1000"
			    :duration="3000"
			    :circular="true"
			    :vertical="true"
			    :disable-touch="true"
			    style="height: 170rpx;"
			    :slides-per-view="1"
			    :display-multiple-items="3"
			    ref="mySwiperRef"
			  >
			    <swiper-item v-for="(message, index) in desensitizedMobile">
			      <view class="swiper-item">
			        <view class="item">
			          {{ message.user.nickname }}
			        </view>
			        <view
			          class="item"
			          style="width: 155rpx;"
			        >
			          {{ message.phonetm }}
			        </view>
			        <view
			          class="item"
			          style="width: 80rpx;"
			        >
			          {{ message.product_name }}
			        </view>
			        <view
			          class="item"
			          style="width: 255rpx;"
			        >
			          {{ message.create_time }}
			        </view>
			      </view>
			    </swiper-item>
			  </swiper>
		  </template>
		  <template v-else>
			  <view class="nodata">
			  	暂无中奖名单
			  </view>
		  </template>
		  
        
      </view>
      <!-- 中奖弹窗 -->
      <view
        class="prize-popup"
        v-if="show_result"
      >
        <view class="popup-content">
          <view class="popup-title">抢红包结果</view>
          <view class="popup-prize">{{ win_prize.product_name }}</view>
          <!-- <image :src="win_prize.image || ''" class="popup-img"></image> -->
          <view
            class="popup-btn"
            @click="close_popup(win_prize.product_name)"
          >确定</view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import { ref, reactive, computed, onUnmounted } from 'vue';
import { onLoad, onUnload } from '@dcloudio/uni-app';
import sheep from '@/sheep';

// 当前时间是否是周日7~9点
const dateflag = ref(true)
// 用户是否拥有抢红包资格
const payflag = ref(false)
// 用户是否已经抽过奖
const prizeflag = ref(true)
// 奖池金额
const price = ref(1355813.22)

// 状态定义
const state = reactive({
  prize_list: [],
});


// const chance_count = ref(3);
// const is_center_button = ref(true);
// const current_index = ref(-1);
// const is_running = ref(false);
const win_prize = ref({});
// 中奖弹窗
const show_result = ref(false);

const cjflag = ref(false)

const prize_list = ref([])
const groupbg = ref('');
const color1 = ref('#ffed85');
const color2 = ref('#ffe020');
const rotate = ref(0);
const second = ref(4);
const isactive = ref(false);
const activeIndex = ref(0);
const history = ref([]);

// 用户手机号脱敏处理
const desensitizedMobile = computed(() => {
  return messages.value.map((item, index) => ({
    ...item,
    phonetm: item.user.mobile ? item.user.mobile.slice(0, 3) + '****' + item.user.mobile.slice(-4) : '空',
  }));
});

// 获取用户抢红包资格情况
const get_lotteryIndex = async (flag) => {
     const res = await sheep.$api.prize_week.lotteryIndex();
	 if(res?.data){
		 const status = res.data.status
		 if(status === 'have'){
		 	payflag.value = true
		 	prizeflag.value = false
		 }
		 if(status === 'no'){	
		 	payflag.value = false
		 	prizeflag.value = false
		 }
		 if(status === 'used'){
		 	payflag.value = true
		 	prizeflag.value = true
		 }
		 // 判断当前时间是否在抢红包时间内
		 // get_prizetime(res.data.periods.join_begin_time,res.data.periods.join_end_time)
		 
		 
		 // return
		 
		 let begintime = res.data.periods.join_begin_time
		 let endtime = res.data.periods.join_end_time
		 const now = new Date();
		 // const day = now.getDay(); // 获取当前是星期几，0 表示周日，1 - 6 表示周一到周六
		 // const hour = now.getHours(); // 获取当前小时数
		 const startDateTime = new Date(begintime);
		 const endDateTime = new Date(endtime);
		 
		 // 调用函数进行判断
		 const result = now >= startDateTime && now <= endDateTime
		 // console.log(`当前时间是否在 ${startDateTime} - ${endDateTime} 范围内: ${result}`);
		 // 判读当前时间是否是周日19：00 - 21：00
		 // if (day === 0 && hour >= 19 && hour < 21) {
		 
		 if (result) {
		   dateflag.value = true;
		   selectedIndex.value = 0
		   // 开启定时刷新中奖用户
		   startDataUpdate();
		   return
		 } else {
		   dateflag.value = false;
		   selectedIndex.value = 1
		   startPriceUpdate()
		 }
		 // 计算下周日的日期
		 const nextSunday = new Date(now);
		 nextSunday.setDate(now.getDate() + (7 - now.getDay()));
		 
		 // 设置下周日晚上 19:00 的时间
		 nextSunday.setHours(19, 0, 0, 0);
		 
		 // 计算时间差（以秒为单位）
		 // const timeDiff = 20;
		 const timeDiff = (nextSunday - now) / 1000;
		 totalSeconds.value = timeDiff.toFixed(0)
		 countdownInterval = setInterval(updateCountdown, 1000);
	 }
  
};


// 获取开奖档期
const get_lotteryPeriods = async (flag) => {
  const res = await sheep.$api.prize_week.lotteryPeriods();
  if(res?.data){
  	  weeks.value = res.data
  }
  get_lotteryPool()
  if (flag) {
    get_lotteryOpenLog()
    // get_lotteryIndex()
  }
};

// 获取奖池内奖品信息
const get_lotteryPool = async () => {
	if(weeks?.value){
		const res = await sheep.$api.prize_week.lotteryPool({ id: weeks.value[selectedIndex.value].id });
		let prizelist = res.data
		res.data.forEach((item, index) => {
		  if (item.name === '开始抢红包') {
		    prizelist.splice(index, 1)
		  }
		})
		state.prize_list = prizelist
		if(state.prize_list.length){
			if (state.prize_list.length < 8) {
			  const dataToInsert = {
			    id: null,
			    image: "https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/PrizeDraw/1.png",
			    name: "谢谢参与",
			    point: "wallet",
			    pool_id: null
			  };
			  const newArray = new Array(8 - state.prize_list.length).fill(dataToInsert);
			  state.prize_list = state.prize_list.concat(newArray);
			}
		}else{
			state.prize_list.push({
				id: null,
				image: "https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/PrizeDraw/1.png",
				name: "暂无开奖计划",
				point: "wallet",
				pool_id: null
			})
			const dataToInsert = {
			  id: null,
			  image: "https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/PrizeDraw/1.png",
			  name: "",
			  point: "wallet",
			  pool_id: null
			};
			const newArray = new Array(8 - state.prize_list.length).fill(dataToInsert);
			state.prize_list = state.prize_list.concat(newArray);
		}
		
	}
  
};

// 获取中奖人员名单
const get_lotteryOpenLog = async () => {
	if(weeks?.value){
		const res = await sheep.$api.prize_week.lotteryOpenLog({ id: weeks.value[selectedIndex.value].id });
		if(res.data){
			  messages.value = res.data.data
		}
	}
  
};

// 生命周期
onLoad(async () => {
  // 初始化轮盘
  init()
  // 获取用户红包资格情况
  // get_lotteryIndex()
  // 获取奖池档期
  await get_lotteryPeriods(true)

  // 获取中奖名单
  // get_lotteryOpenLog()
  // const res = sheep.$api.prize_week.lotteryIndex();
  const res = await sheep.$api.prize_week.lotteryIndex();
  if(res?.data){
	  const status = res.data.status
	  if (status === 'have') {
	    payflag.value = true
	    prizeflag.value = false
	  }
	  if (status === 'no') {
	    payflag.value = false
	    prizeflag.value = false
	  }
	  if (status === 'used') {
	    payflag.value = true
	    prizeflag.value = true
	  }
	  weeks.value[0] = res.data.periods
	  // 判断当前时间是否在红包时间内
	  // get_prizetime(res.data.periods.join_begin_time,res.data.periods.join_end_time)
	  
	  
	  // return
	  
	  let begintime = res.data.periods.join_begin_time
	  let endtime = res.data.periods.join_end_time
	  const now = new Date();
	  // const day = now.getDay(); // 获取当前是星期几，0 表示周日，1 - 6 表示周一到周六
	  // const hour = now.getHours(); // 获取当前小时数
	  const startDateTime = new Date(begintime);
	  const endDateTime = new Date(endtime);
	  
	  // 调用函数进行判断
	  const result = now >= startDateTime && now <= endDateTime
	  // console.log(`当前时间是否在 ${startDateTime} - ${endDateTime} 范围内: ${result}`);
	  // 判读当前时间是否是周日19：00 - 21：00
	  // if (day === 0 && hour >= 19 && hour < 21) {
	  
	  if (result) {
	    dateflag.value = true;
	    selectedIndex.value = 1
	    // 开启定时刷新中奖用户
	    startDataUpdate();
	    return
	  } else {
	    dateflag.value = false;
	    selectedIndex.value = 0
	    startPriceUpdate()
	  }
	  // 计算下周日的日期
	  const nextSunday = new Date(now);
	  nextSunday.setDate(now.getDate() + (7 - now.getDay()));
	  
	  // 设置下周日晚上 19:00 的时间
	  nextSunday.setHours(19, 0, 0, 0);
	  
	  // 计算时间差（以秒为单位）
	  // const timeDiff = 20;
	  const timeDiff = (nextSunday - now) / 1000;
	  totalSeconds.value = timeDiff.toFixed(0)
	  countdownInterval = setInterval(updateCountdown, 1000);
  }
  
  



});
onUnload(() => {
  clearInterval(scrollInterval);
  clearInterval(dataUpdateInterval);
  clearInterval(countdownInterval);
  clearInterval(priceUpdateInterval);
});
onUnmounted(() => {
  clearInterval(scrollInterval);
  clearInterval(dataUpdateInterval);
  clearInterval(countdownInterval);
  clearInterval(priceUpdateInterval);
});

const start = async () => {
  if (isactive.value) { return }
  //  获取抢红包结果
  const res = await sheep.$api.prize_week.lotteryApply();
  if(res.data?.product_id){
	  let n = state.prize_list.findIndex(item => item.id === res.data.pool_id);
	  if (n === -1) {
	    console.error('未找到对应奖品');
	    return
	  }
	  // let n = Math.floor(Math.random() * 8);
	  isactive.value = true
	  rotate.value += (1800 + (activeIndex.value - n) * 360 / 8)
	  
	  setTimeout(() => {
	    activeIndex.value = n;
	    prizeflag.value = true
	    isactive.value = false
	    win_prize.value = res.data
	  	show_result.value = true;
	  }, second.value * 1000)
  }else{
	  uni.showModal({
	  	title: '提示',
	  	content: res.msg,
	  	success: function(res) {
	  	}
	  });
  }
  
}
const show_lottery_result = (index) => {
  // 直接使用接口返回的索引查找奖品
  const prize = state.prize_list.find((item) => item.id === index);
  if (prize) {
    win_prize.value = prize;
  } else {
    console.error('未找到对应奖品:', index);
  }

  setTimeout(() => {
    show_result.value = true;
  }, 500);
};
const init = async () => {
  //绘制转盘奖项背景颜色
  let str = '';
  let num = 8;
  let deg = 360 / num;
  let colors = [];
  str += `conic-gradient(from ${-deg / 2}deg at 50% 50%,`;
  for (var i = 0; i < num; i++) {
    if (i % 2 == 0) {
      colors.push(`${color1.value} ${i * deg}deg,${color1.value} ${(i + 1) * deg}deg,${color2.value} ${(i + 1) * deg}deg`)
    } else {
      colors.push(`${color2.value} ${i * deg}deg,${color2.value} ${(i + 1) * deg}deg,${color1.value} ${(i + 1) * deg}deg`)
    }
  }
  str += colors.join(',')
  str += ')';
  groupbg.value = str
};

const messages = ref([]);

const scrollTop = ref(0);
const messageHeight = 30; // 每条消息的高度，可根据实际情况调整
const scrollSpeed = 0.5; // 滚动速度，可根据实际情况调整
let scrollInterval;
let dataUpdateInterval;
let priceUpdateInterval;
const mySwiperRef = ref(null);

// 中奖人员更新的函数
const updateData = async () => {
	if(weeks.value[0]){
		const res = await sheep.$api.prize_week.lotteryOpenLog({ id: weeks.value[0].id });
		messages.value.shift(); // 移除第一条消息
		messages.value.unshift(res.data.data[0])
	}
  
};

// 开始中奖数据更新的函数
const startDataUpdate = () => {
  dataUpdateInterval = setInterval(() => {
    updateData();
  }, 5000); // 每 5 秒更新一次数据，可根据实际情况调整
};

// 奖池金额更新
const updatePrice = async () => {
  const res = await sheep.$api.prize_week.lotteryPeriods();
  weeks.value = res.data
};

// 开始奖池金额更新
const startPriceUpdate = () => {
  priceUpdateInterval = setInterval(() => {
    updatePrice();
  }, 3000); // 每 5 秒更新一次数据，可根据实际情况调整
};



// 计算属性
const display_prizes = computed(() => {
  return state.prize_list.map((item, index) => ({
    ...item,
    is_center: item.name === '开始抢红包',
    original_index: index,
  }));
});

// 关闭弹窗
const close_popup = async (name) => {
  show_result.value = false;
  sheep.$router.go('/pages/tuangou/lottery_result_day');
  // current_index.value = -1;

  // if (name !== '谢谢惠顾') {
  //   await sheep.$store('user').getInfo();
  //   sheep.$router.go('/pages/user/wallet/money');
  // }
};

// 初始化总秒数为 7 天的秒数
const totalSeconds = ref(7 * 24 * 60 * 60);
// const totalSeconds = ref(7 * 24 * 60 * 60);
const days = ref(0);
const hours = ref(0);
const minutes = ref(0);
const seconds = ref(0);

let countdownInterval;
// 倒计时(到下一个周日的晚上19点)
const updateCountdown = () => {
  if (totalSeconds.value > 0) {
    totalSeconds.value--;
    days.value = Math.floor(totalSeconds.value / (24 * 60 * 60));
    const remainingSecondsAfterDays = totalSeconds.value % (24 * 60 * 60);
    hours.value = Math.floor(remainingSecondsAfterDays / (60 * 60));
    const remainingSecondsAfterHours = remainingSecondsAfterDays % (60 * 60);
    minutes.value = Math.floor(remainingSecondsAfterHours / 60);
    seconds.value = remainingSecondsAfterHours % 60;
  } else {
    clearInterval(countdownInterval);
    clearInterval(priceUpdateInterval);
    dateflag.value = true
    selectedIndex.value = 1
    // 开启定时刷新中奖用户
    startDataUpdate();
  }
};


// 获取当前日期
const currentDate = new Date();

// 生成过去30周（含当前周）的周范围
const generateWeeks = () => {
  const weeks = [];
  const current = new Date(currentDate);
  for (let i = 0; i < 31; i++) {
    const startOfWeek = new Date(current);
    startOfWeek.setDate(current.getDate() - current.getDay() + 1 - i * 7);
    const endOfWeek = new Date(startOfWeek);
    endOfWeek.setDate(startOfWeek.getDate() + 6);
    const weekRange = `${formatDate(startOfWeek)}-${formatDate(endOfWeek)}`;
    weeks.push(weekRange);
  }
  return weeks;
};

// 格式化日期
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}/${month}/${day}`;
};

// 周范围数组
const weeks = ref([]);
// 当前选择的周索引
const selectedIndex = ref(0);

// 处理选择器变化事件
const onPickerChange = (e) => {
  selectedIndex.value = e.detail.value;
  clearInterval(priceUpdateInterval);
};

// 计算选中周的日期
const getWeekDates = computed(() => {
  const selectedStartDate = new Date(currentDate);
  selectedStartDate.setDate(currentDate.getDate() - currentDate.getDay() + 1 - selectedIndex.value * 7);
  const dates = [];
  for (let i = 0; i < 7; i++) {
    const date = new Date(selectedStartDate);
    date.setDate(selectedStartDate.getDate() + i);
    dates.push(formatDate(date));
  }
  return dates;
});
</script>

<style lang="scss">
.lottery_box {
  width: 100%;
  height: 100vh;
  position: relative;

  .bgi {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .lottery-grid {
    position: absolute;
    top: 183rpx;
    left: 421rpx;
    transform: translateX(-50%);
    width: 550rpx;
    height: 550rpx;
  }
}

.lottery-container {
  // padding: 30rpx;
  // background-color: #fff;
  min-height: 100vh;

  // 标题样式
  .lottery-title {
    font-size: 40rpx;
    font-weight: bold;
    text-align: center;
    color: #ff4500;
    margin-bottom: 20rpx;
  }

  // 抢红包机会样式
  .lottery-chance {
    text-align: center;
    font-size: 28rpx;
    color: #333;
    margin-bottom: 30rpx;
  }

  // 九宫格样式
  .lottery-grid {
    margin: 0 auto;
    //   background-color: #fe8848;
    border-radius: 20rpx;
    padding: 15rpx;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 15rpx;

    // 单个奖品格子
    .lottery-item {
      background-color: #fefbe6;
      border-radius: 10rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;

      &.active {
        background-color: #ff9d00;
        transform: scale(0.95);
      }

      // 奖品图片
      .prize-img {
        width: 100rpx;
        height: 100rpx;
        margin-bottom: 10rpx;
        background-color: #f5f5f5;
      }

      // 奖品名称
      .prize-name {
        font-size: 24rpx;
        color: #ff3c47;
        text-align: center;
      }

      // 开始按钮包装
      .start-btn-wrap {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ff4500;
        position: relative;
        cursor: pointer;

        &::after {
          content: '';
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          width: 0;
          height: 0;
          border-left: 120rpx solid transparent;
          border-right: 120rpx solid transparent;
          border-bottom: 60rpx solid #ff6600;
        }

        // 开始按钮文字
        .start-btn {
          color: #fff;
          font-size: 32rpx;
          font-weight: bold;
          z-index: 1;
          position: relative;
          top: -10rpx;
        }
      }
    }
  }

  // 规则样式
  .lottery-rules {
    margin-top: 40rpx;
    padding: 30rpx 0;

    .rules-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }

    .rules-content {
      .rule-item {
        font-size: 26rpx;
        color: #666;
        line-height: 1.8;
      }
    }
  }

  // 中奖弹窗
  .prize-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;

    .popup-content {
      width: 500rpx;
      background-color: #fff;
      border-radius: 20rpx;
      padding: 40rpx;
      display: flex;
      flex-direction: column;
      align-items: center;

      .popup-title {
        font-size: 32rpx;
        color: #333;
        margin-bottom: 20rpx;
      }

      .popup-prize {
        font-size: 40rpx;
        font-weight: bold;
        color: #ff6600;
        margin-bottom: 30rpx;
      }

      .popup-img {
        width: 200rpx;
        height: 200rpx;
        margin-bottom: 30rpx;
        background-color: #f0f0f0;
      }

      .popup-btn {
        width: 200rpx;
        height: 80rpx;
        background-color: #ff6600;
        color: #fff;
        border-radius: 40rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
      }
    }
  }
}

.zhuanpan {
  width: 460rpx;
  height: 460rpx;
  position: relative;
  border-radius: 50%;
  box-shadow: inset 0 0 20rpx rgba(#fff, 0.15);
  box-sizing: border-box;
  padding: 44rpx;
  .point {
    position: absolute;
    top: 12rpx;
    bottom: 12rpx;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &::before,
    &::after {
      content: '';
      width: 12rpx;
      height: 12rpx;
      box-shadow: 0 0 10rpx #fffa65;
      border-radius: 50%;
      display: block;
    }
  }
  @for $i from 1 through 8 {
    .point:nth-child(#{$i}) {
      transform: translateX(-50%) rotate($i * 20deg);
    }
  }
  .content {
    z-index: 2;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fcecb2;
    border-radius: 50%;
    overflow: hidden;
    .item {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 50%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      transform-origin: 50% 100%;
      .img {
        margin-top: 24rpx;
        line-height: 1;
        image {
          width: 40rpx;
          height: 40rpx;
        }
      }
      .name {
        text-align: center;
        font-size: 24rpx;
        margin-top: 12rpx;
        font-weight: bold;
        color: #914401;
        width: 100rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        // white-space: nowrap;
        // overflow: hidden;
        // text-overflow: ellipsis;
      }
    }
  }
  .arrow {
    width: 30rpx;
    height: 30rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffea00;
    font-weight: bold;
    font-size: 40rpx;
    background: linear-gradient(to top, #7438ff, #a869ff);
    border: 8rpx solid #6932e3;
    border-radius: 50%;
    box-shadow: inset 0 0 20rpx rgba(#fff, 0.3);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 3;
    &::after {
      content: '';
      border-bottom: 38rpx solid #6932e3;
      border-left: 10rpx solid transparent;
      border-right: 10rpx solid transparent;
      position: absolute;
      left: 50%;
      top: -38rpx;
      transform: translateX(-50%);
      margin: auto;
    }
  }
}
.topriqi {
  position: absolute;
  left: 172rpx;
  top: 100rpx;
  opacity: 1;

  font-family: Source Han Sans;
  font-size: 25rpx;
  font-weight: bold;
  letter-spacing: 0px;

  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  background: linear-gradient(90deg, #f75e4e 0%, #a61512 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.topprice {
  position: absolute;
  left: 43rpx;
  top: 175rpx;
  opacity: 1;

  font-family: Source Han Sans;
  font-size: 33rpx;
  font-weight: bold;
  letter-spacing: 0px;

  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #f86148;
}
.toppricenum {
  position: absolute;
  left: 85rpx;
  top: 150rpx;
  opacity: 1;

  font-family: Source Han Sans;
  font-size: 61rpx;
  font-weight: bold;
  letter-spacing: 0px;

  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #f86148;
}
.cjbtn {
  position: absolute;
  left: 180rpx;
  top: 785rpx;
  width: 400rpx;
  height: 100rpx;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Source Han Sans;
  font-size: 29rpx;
  font-weight: bold;
  letter-spacing: 0px;

  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  background: linear-gradient(90deg, #f75e4e 0%, #a61512 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  .cjtext {
    width: 100%;
    height: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .cjsettime {
    width: 100%;
    height: 100rpx;
    text-align: center;
    .settime {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      color: #fa5151;
      .bell {
        width: 25rpx;
        height: 25rpx;
        margin-right: 5rpx;
      }
    }
  }
}

.textzj {
  position: absolute;
  left: 275rpx;
  top: 928rpx;
  width: 400rpx;
  height: 100rpx;
  opacity: 1;

  font-family: Source Han Sans;
  font-size: 33rpx;
  font-weight: 500;
  letter-spacing: 0px;

  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #ffffff;
}
.textwq {
  position: absolute;
  right: 38rpx;
  top: 989rpx;
  opacity: 1;
  display: flex;
  align-items: center;

  font-family: Source Han Sans;
  font-size: 24rpx;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0px;

  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #3d3d3d;
}
.jt {
  width: 12rpx;
  height: 12rpx;
  border-top: 4rpx solid #000;
  border-right: 4rpx solid #000;
  transform: rotate(45deg);
  margin-left: 5rpx;
}
.mingdan {
  position: absolute;
  top: 1035rpx;
  width: 90%;
  padding: 20rpx 5%;
  height: 200rpx;
}
.nodata{
	width: 100%;
	height: 200rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.scroll-container {
  position: relative;
  height: 90px; /* 显示三条消息的高度，可根据实际情况调整 */
  overflow: hidden;
}

.scroll-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: transform 0.2s linear;
}

.message {
  height: 30px;
  line-height: 30px;
  opacity: 0;
  animation: fadeInOut 3s linear infinite;
}

@keyframes fadeInOut {
  0%,
  100% {
    opacity: 0;
  }
  20%,
  80% {
    opacity: 1;
  }
}
.swiper-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 10rpx 0;
  font-size: 24rpx;
  .item {
    width: 90rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.my {
  position: absolute;
  right: 0rpx;
  top: 45rpx;
  width: 200rpx;
  height: 50rpx;
  font-weight: bold;
  opacity: 1;
  border-radius: 20rpx 0 0 20rpx;
  background-color: #fa7861;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btnwq {
  position: absolute;
  width: 120rpx;
  height: 40rpx;
  left: 480rpx;
  top: 94rpx;
  font-weight: bold;
  opacity: 1;
  border-radius: 10rpx;
  background: linear-gradient(270deg, #ea250d 0%, #ef6c1c 100%);
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  .pickercls {
    width: 120rpx;
    height: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
